<template>
<div class="lottieCanvas" ref="lottieCanvasRef"></div>
</template>

<script lang="ts" setup>
import lottie from 'lottie-web'
import { ref, defineProps, defineExpose, onMounted } from "vue";

const props = defineProps({
    loop: {
        type: Boolean,
        default: false
    },
    autoplay: {
        type: Boolean,
        default: false
    },
    defaultLottie: {
        type: String,
        default: 'party'
    }
})

let lottieCanvasRef = ref()
let base = null as any

const play = () => {
    base.play()
}

const pause = () => {
    base.pause()
}

defineExpose({
    play,
    pause,
})

const urls = (name) => {
    let url = {
        'party': 'https://lottie.host/3bbe1c7c-d476-4cb0-9083-1855081a524d/E5w1Nix8ku.json',
        'particle': 'https://lottie.host/7f2b25fd-ba75-43e9-a16a-8493a31a337b/DiPaH3X4Y4.json',
        'fireworks': 'https://lottie.host/70f4896c-fc2d-4806-9381-76faca426fbd/rambBUoK2G.json',
        'partyFireworks': 'https://lottie.host/806d7f61-f8a7-41d3-937c-f827efd14568/LHRRc8e2TC.json',
        'light': 'https://lottie.host/3150f2f1-3021-4609-8930-5731a613296a/Tff08x43iQ.json',
    }
    return url[name]
}

onMounted(() => {
    let params = {
        container: lottieCanvasRef.value,
        // renderer: 'svg',
        renderer: 'canvas',
        loop: props.loop,
        autoplay: props.autoplay,
        // animationData: animationData,
    } as any
    if (props.defaultLottie) {
        params.path = urls(props.defaultLottie)
    }
    // console.log('params',params)
    base = lottie.loadAnimation(params)
    if (!props.loop) {
        base.addEventListener('complete', () => { // 动画结束后销毁
            base.destroy()
        })
    }
    if (props.autoplay) play()
})

</script>

<style lang="scss">
.lottieCanvas {
    width: 100%;
    height: 100%;
    pointer-events: none;
}
</style>